<template>
  <div class="app-container">
    <!-- <mainTilte title="费用单" /> -->
    <div class="mb10">
      <form-selections :is-active="isActive" :items="formItems" :query-param.sync="searchParams" display="block" @handleSearch="handleSearch" />
    </div>
    <div class="select_flex">
      <div class="operation_button_box mb10">
        <el-button v-action="'UtilityBill@save'" size="small" type="primary" @click="bulkShipment">新增费用单</el-button>
        <el-button v-action="'UtilityBill@oceanShippingBill'" size="small" type="primary" @click="openList">查看海运单</el-button>
        <el-button v-action="'UtilityBill@domesticTransBill'" size="small" type="primary" @click="towingClick">查看拖运单</el-button>
        <el-button v-action="'UtilityBill@totalBill'" size="small" type="primary" @click="allClick">查看总单</el-button>
        <el-button v-action="'UtilityBill@batchDelete'" size="small" type="primary" @click="selectedDelete">批量删除</el-button>
        <el-button v-action="'UtilityBill@utilityBillExport'" size="small" type="primary" :loading="formVisibleDownAll" @click="handleExportAll">导出</el-button>
      </div>
      <div>
        <el-button size="small" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
          搜索
        </el-button>
        <el-button size="small" class="filter-item" icon="el-icon-refresh" @click="handleRefresh">
          重置
        </el-button>
        <el-button size="small" @click="isActive=!isActive">{{ isActive?'展开':'收起' }}</el-button>
      </div>
    </div>
    <!--下载字段选择-->
    <DownModul
      url="utilitybill/utility-bill-export"
      :search-param="downLoadParams"
      :form-visible-down.sync="formVisibleDownAll"
      titel="导出字段选择"
      :options-modul="optionsModulAll"
    />
    <div class="page-grid ">
      <!-- <div class="action-group">
          <el-button v-action="'UtilityBill@save'" size="small" type="primary" @click="bulkShipment">新增费用单</el-button>
          <el-button v-action="'UtilityBill@oceanShippingBill'" size="small" type="primary" @click="openList">查看海运单</el-button>
          <el-button v-action="'UtilityBill@domesticTransBill'" size="small" type="primary" @click="towingClick">查看拖运单</el-button>
          <el-button v-action="'UtilityBill@totalBill'" size="small" type="primary" @click="allClick">查看总单</el-button>
          <el-button v-action="'UtilityBill@batchDelete'" size="small" type="primary" @click="selectedDelete">批量删除</el-button>
        </div> -->
      <egrid
        v-loading="loading"
        class="egrid"
        stripe
        fit
        border
        highlight-current-row
        element-loading-text="正在努力加载中..."
        :column-type="['selection']"
        :data="tableData"
        :columns="columns"
        :columns-schema="columnsSchema"
        :columns-handler="columnsHandler"
        :screen-heigh="screenHeigh"
        @selection-change="checkIds"
      />
      <epagination
        v-if="tableData"
        :total="total"
        :current="searchParams.page"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <!-- 海运单 -->
    <el-dialog
      v-if="dialogAddVisible"
      v-loading.lock="loading"
      v-loading="loading"
      :title="title"
      :visible.sync="dialogAddVisible"
      :close-on-click-modal="false"
      width="60%"
      class="dialogText header-none"
      :element-loading-text="loadingText"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      center
    >
      <el-row>
        <mainTilte title="海运费" />
      </el-row>
      <div class="action-group">
        <el-button v-action="'UtilityBill@oceanShippingBillExport'" type="primary" :loading="exportLoading" @click="formVisibleDown=true;downLoadParams.id=checkedList[0].id">导出</el-button>
      </div>
      <egrid
        v-loading="loading"
        class="egrid"
        stripe
        fit
        border
        highlight-current-row
        element-loading-text="正在努力加载中..."
        :column-type="['selection']"
        :data="tableDataOcean"
        :columns="columnsOcean"
        @selection-change="checkIdsOcean"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取消</el-button>
      </span>
      <!--下载字段选择-->
      <DownModul :append="true" url="/utilitybill/ocean-shipping-bill-export" :search-param="downLoadParams" :form-visible-down.sync="formVisibleDown" titel="导出字段选择" :options-modul="optionsModulHY" />
    </el-dialog>
    <!-- 拖运单 -->
    <el-dialog
      v-if="dialogTowingVisible"
      v-loading.lock="loading"
      v-loading="loading"
      :title="title"
      :visible.sync="dialogTowingVisible"
      :close-on-click-modal="false"
      width="60%"
      class="dialogText header-none"
      :element-loading-text="loadingText"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      center
    >
      <el-row>
        <mainTilte title="拖运费" />
      </el-row>
      <div class="action-group">
        <el-button v-action="'UtilityBill@domesticTransBillExport'" type="primary" :loading="exportLoading" @click="formVisibleDown=true;downLoadParams.id=checkedList[0].id">导出</el-button>
      </div>
      <egrid
        v-loading="loading"
        class="egrid"
        stripe
        fit
        border
        highlight-current-row
        element-loading-text="正在努力加载中..."
        :column-type="['selection']"
        :data="tableDataTowing"
        :columns-schema="columnsSchemaTowing"
        :columns="columnsTowing"
        @selection-change="checkIdsTowing"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogTowingVisible = false">取消</el-button>
      </span>
      <!--下载字段选择-->
      <DownModul :append="true" url="/utilitybill/domestic-trans-bill-export" :search-param="downLoadParams" :form-visible-down.sync="formVisibleDown" titel="导出字段选择" :options-modul="optionsModulTY" />
    </el-dialog>
    <!-- 总单 -->
    <el-dialog
      v-if="dialogAllVisible"
      v-loading.lock="loading"
      v-loading="loading"
      :title="title"
      :visible.sync="dialogAllVisible"
      :close-on-click-modal="false"
      width="60%"
      class="dialogText header-none"
      :element-loading-text="loadingText"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      center
    >
      <el-row>
        <mainTilte title="总单" />
      </el-row>
      <div class="action-group">
        <el-button v-action="'UtilityBill@totalBillExport'" type="primary" :loading="exportLoading" @click="formVisibleDown=true;downLoadParams.id=checkedList[0].id">导出</el-button>
      </div>
      <egrid
        v-loading="loading"
        class="egrid"
        stripe
        fit
        border
        highlight-current-row
        element-loading-text="正在努力加载中..."
        :column-type="['selection']"
        :data="tableDataAll"
        :columns-schema="columnsSchemaAll"
        :columns="columnsAll"
        @selection-change="checkIdsAll"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAllVisible = false">取消</el-button>
      </span>
      <!--下载字段选择-->
      <DownModul :append="true" url="/utilitybill/total-bill-export" :search-param="downLoadParams" :form-visible-down.sync="formVisibleDown" titel="导出字段选择" :options-modul="optionsModul" />
    </el-dialog>
  </div>
</template>

<script>
import list from '@/layout/mixin/list'
import btnGroup from './components/btnGroup'
import { downloadxlsx } from '@/utils/index'
// import appPrice from '@/components/base/appPrice'
import cacheList from '@/layout/mixin/cacheList'
import DownModul from '@/components/DownModul/index.vue'
import appHtml from '@/components/appHtml/index'
import {
  action
} from '@/directive/permission/index.js' // 权限判断指令
export default {
  name: 'PurchaseExpenseList',
  components: { DownModul },
  directives: {
    action
  },
  mixins: [list, cacheList],
  data() {
    return {
      formVisibleDownAll: false,
      optionsModulAll: [
        {
          key: 'bl_no',
          label: '提单号'
        },
        {
          key: 'cabinet_no',
          label: '柜号'
        },
        {
          key: 'shipment_date',
          label: '起运日期'
        },
        {
          key: 'loading_date',
          label: '装柜日期'
        },
        {
          key: 'fee_ocean',
          label: '海运费(USD)'
        },
        {
          key: 'tax_fee',
          label: '税金（USD）'
        },
        {
          key: 'amount_usd',
          label: '总美金费用(USD)'
        },
        {
          key: 'amount_rmb',
          label: '人民币费用(RMB)'
        },
        {
          key: 'domestic_trans_amount',
          label: '国内陆运费总和'
        },
        {
          key: 'overseas_trans_amount',
          label: '国外陆运费'
        },
        {
          key: 'destination_port_text',
          label: '目的港'
        },
        {
          key: 'ocean_lforwarder',
          label: '海运(货代)'
        },
        {
          key: 'domestic_lforwarder',
          label: '国内(货代)'
        },
        {
          key: 'overseas_lforwarder',
          label: '国外(货代)'
        }
      ],
      isActive: true,
      formItems: [
        {
          label: '提单号',
          key: 'bl_no',
          type: 'input',
          placeholder: '请输入提单号'
        },
        {
          label: '柜号',
          key: 'cabinet_no',
          type: 'input',
          placeholder: '请输入柜号'
        },
        {
          label: '目的港',
          key: 'destination_port',
          type: 'input',
          placeholder: '请输入目的港'
        },
        {
          label: '海运段(货代)',
          key: 'ocean_name',
          type: 'input',
          placeholder: '请输入海运段（货代）'
        },
        {
          label: '国内段(货代)',
          key: 'domestic_name',
          type: 'input',
          placeholder: '请输入国内段（货代）'
        },
        // overseas
        {
          label: '国外段(货代)',
          key: 'overseas_name',
          type: 'input',
          placeholder: '请输入国外段（货代）'
        },
        // {
        //   label: '装柜日期',
        //   key: 'loading_date',
        //   type: 'dataPicker',
        //   valueFormat: 'yyyy-MM-dd',
        //   placeholder: '装柜日期'
        //   //   wrap: true
        // },
        // {
        //   label: '起运日期',
        //   key: 'shipment_date',
        //   type: 'dataPicker',
        //   valueFormat: 'yyyy-MM-dd',
        //   placeholder: '起运日期'
        //   //   wrap: true
        // },
        {
          label: '装柜日期',
          key: 'date_loading',
          type: '',
          date: 'daterange',
          valueFormat: 'yyyy-MM-dd',
          placeholder: '请选择时间范围'
        },
        {
          label: '起运日期',
          key: 'date_shipment',
          type: '',
          date: 'daterange',
          valueFormat: 'yyyy-MM-dd',
          placeholder: '请选择时间范围'
          //   wrap: true
        }
        // {
        //   label: '起运日期',
        //   key: 'shipment_date',
        //   type: '',
        //   valueFormat: 'yyyy-MM-dd',
        //   placeholder: '请选择时间范围'
        //   //   wrap: true
        // }
      ],
      downLoadParams: {},
      formVisibleDown: false,
      optionsModulHY: [
        {
          key: 'name',
          label: '品名'
        },
        {
          key: 'bl_no',
          label: '提单号'
        },
        {
          key: 'cabinet_no',
          label: '柜号'
        },
        {
          key: 'shipment_date',
          label: '起运日期'
        },
        {
          key: 'fee',
          label: '海运费(USD)'
        },
        {
          key: 'tax_fee',
          label: '税金（USD）'
        },
        {
          key: 'amount_usd',
          label: '总美金费用(USD)'
        },
        {
          key: 'amount_rmb',
          label: '人民币费用(RMB)'
        },
        {
          key: 'lforwarder_company',
          label: '货代'
        }
      ],
      optionsModulTY: [
        {
          key: 'name',
          label: '品名'
        },
        {
          key: 'bl_no',
          label: '提单号'
        },
        {
          key: 'cabinet_no',
          label: '柜号'
        },
        {
          key: 'loading_date',
          label: '装柜日期'
        },
        {
          key: 'shipment_date',
          label: '起运日期'
        },
        {
          key: 'traile_fee',
          label: '拖车费'
        },
        {
          key: 'detour_fee',
          label: '绕路费'
        },
        {
          key: 'advance_fee',
          label: '提进费'
        },
        {
          key: 'declare_fee',
          label: '报关费'
        },
        {
          key: 'amount',
          label: '合计'
        },
        {
          key: 'lforwarder_company',
          label: '货代'
        }
      ],
      optionsModul: [
        {
          key: 'cates',
          label: '品名'
        },
        {
          key: 'bl_no',
          label: '提单号'
        },
        {
          key: 'cabinet_no',
          label: '柜号'
        },
        {
          key: 'shipment_date',
          label: '起运日期'
        },
        {
          key: 'loading_date',
          label: '装箱日期'
        },
        {
          key: 'shipping_fee',
          label: '海运费(USD)'
        },
        {
          key: 'tax_fee',
          label: '税金(USD)'
        },
        {
          key: 'amount_usd',
          label: '总费用(USD)'
        },
        {
          key: 'amount_rmb',
          label: '总费用(RMB)'
        },
        {
          key: 'shipment_company',
          label: '货代(海运)'
        },
        {
          key: 'domestic_fee',
          label: '国内路段合计（RMB）'
        },
        {
          key: 'domestic_company',
          label: '货代(国内)'
        },
        {
          key: 'overseas_fee',
          label: '国外路段合计(USD)'
        },
        {
          key: 'overseas_company',
          label: '货代(国外)'
        }
      ],
      componentName: 'PurchaseExpenseList',
      date: [],
      value: '',
      value1: [],
      loading: false,

      title: '',
      loadingText: '',
      rule: {},
      /** *
       * 定义搜索框
       */
      searchParams: {
        page: 1,
        limit: 10, // 默认是10
        totalRows: 0,
        type: 'bl_no',
        bl_no: '',
        shipment_date_start: '',
        shipment_date_end: '',
        loading_date_start: '',
        loading_date_end: '',
        cabinet_no: '',
        date_loading: '',
        destination_port: '',
        domestic_name: '',
        ocean_name: '',
        date_shipment: '',
        overseas_name: ''
      },
      /** *
       * 定义显示的表格
       */
      columns: [
        {
          label: '提单号',
          prop: 'bl_no',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '柜号',
          prop: 'cabinet_no',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '起运日期',
          prop: 'shipment_date',
          width: '100',
          align: 'center',
          tooltip: false
        },
        {
          label: '装柜日期',
          prop: 'loading_date',
          width: '100',
          align: 'center',
          tooltip: false
        },
        {
          label: '目的港',
          prop: 'destination_port_text',
          width: '180',
          align: 'center',
          tooltip: false
        },
        // domestic_lforwarder
        {
          label: '国内段（货代）',
          prop: 'domestic_lforwarder',
          width: '180',
          align: 'center',
          tooltip: false
        },
        {
          label: '海运段（货代）',
          prop: 'ocean_lforwarder',
          width: '180',
          align: 'center',
          tooltip: false
        },
        // overseas_name
        {
          label: '国外段（货代）',
          prop: 'overseas_lforwarder',
          width: '180',
          align: 'center',
          tooltip: false
        },
        {
          label: '国内路运费用',
          prop: 'domestic_trans_amount',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '海运费',
          prop: 'ocean_shipping_amount',
          width: '200',
          align: 'center',
          tooltip: false,
          component: appHtml,
          //   propsHandler({ row }) {
          //     return { text: row.ocean_shipping_amount }
          //   }
          //         177WNZNZN13140A
          // EGLV143161555799    ========2
          // EGLV143161554211
          // EGLV143151400946
          // EGLV143180180738
          // EGLV143180189654
          // EGLV143180189638
          // OOLU2122695430
          // 211358187
          propsHandler({ row }) {
            let listString = ''
            if (row.bl_no !== 'HDMUTAOZ70256700' &&
            // row.bl_no !== '177WNZNZN13140A' &&
            // row.bl_no !== 'EGLV143161555799' &&
            // row.bl_no !== 'EGLV143161554211' &&
            // row.bl_no !== 'EGLV143151400946' &&
            // row.bl_no !== 'EGLV143180180738' &&
            // row.bl_no !== 'EGLV143180189654' &&
            // row.bl_no !== 'EGLV143180189638' &&
            // row.bl_no !== 'OOLU2122695430' &&
            row.bl_no !== '211358187'
            ) {
              const ocean_shipping = JSON.parse(row.ocean_shipping)
              listString += `<div>海运费(USD)：${ocean_shipping.fee}</div>`
              listString += `<el-divider class="line_style"></el-divider>`
              listString += `<div>税金(USD)：${ocean_shipping.tax_fee}</div>`
              listString += `<el-divider class="line_style"></el-divider>`
              listString += `<div>总美金费用(USD)：${ocean_shipping.amount_usd}</div>`
              listString += `<el-divider class="line_style"></el-divider>`
              listString += `<div>人民币费用(RMB)：${ocean_shipping.amount_rmb}</div>`
              listString += `<el-divider class="line_style"></el-divider>`
              listString += `<div>总费用(RMB)：${ocean_shipping.amount}</div>`
            } else {
              listString += `<div>海运费(USD)：0</div>`
            }

            return { text: listString }
          }
        },
        {
          label: '国外路运费用',
          prop: 'overseas_trans_amount',
          width: '100',
          align: 'center',
          tooltip: false
        },
        {
          label: '创建人',
          prop: 'created_by_name',
          width: '100',
          align: 'center',
          tooltip: false
        },
        {
          label: '创建时间',
          prop: 'created_at',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '修改人',
          prop: 'updated_by_name',
          width: '100',
          align: 'center',
          tooltip: false
        },
        {
          label: '修改时间',
          prop: 'updated_at',
          width: '200',
          align: 'center',
          tooltip: false
        }
      ],
      /** *
       * 字典表组件
       */
      columnsSchema: {},
      issignContract: [
        {
          name: '费用单编号',
          code: 'bl_no'
        }
      ],
      dialogAddVisible: false, // 海运单弹框
      columnsOcean: [
        // 海运单
        {
          label: '商品类型',
          prop: 'category_name',
          width: '200',
          align: 'center',
          tooltip: false
        },

        {
          label: '品名',
          prop: 'name',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '提单号',
          prop: 'bl_no',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '柜号',
          prop: 'cabinet_no',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '起运日期',
          prop: 'shipment_date',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '海运费(USD)',
          prop: 'fee',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '税金(USD)',
          prop: 'tax_fee',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '总美金费用(USD)',
          prop: 'amount_usd',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '人民币费用(RMB)',
          prop: 'amount_rmb',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '货代',
          prop: 'lforwarder_company',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '仓库',
          prop: 'warehouse',
          width: '200',
          align: 'center',
          tooltip: false
        }
      ],
      tableDataOcean: [],
      dialogTowingVisible: false, // 拖运单弹框
      tableDataTowing: [],
      columnsTowing: [
        {
          label: '商品类型',
          prop: 'category_name',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '品名',
          prop: 'name',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '提单号',
          prop: 'bl_no',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '柜号',
          prop: 'cabinet_no',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '装柜日期',
          prop: 'shipment_date',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '起运日期',
          prop: 'shipment_date',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '拖车费(￥)',
          prop: 'traile_fee',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '绕路费(￥)',
          prop: 'detour_fee',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '提进费(￥)',
          prop: 'advance_fee',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '报关费(￥)',
          prop: 'declare_fee',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '合计(￥)',
          prop: 'amount',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '货代',
          prop: 'lforwarder_company',
          width: '200',
          align: 'center',
          tooltip: false
        }
      ],
      /** *
       * 字典表组件
       */
      columnsSchemaTowing: {
        合计: {
          width: 'auto',
          propsHandler({ col, row }) {
            row.amount =
              Number(row.traile_fee) +
              Number(row.detour_fee) +
              Number(row.advance_fee) +
              Number(row.declare_fee)
          }
        }
      },

      // 总单
      dialogAllVisible: false,
      tableDataAll: [],
      columnsAll: [
        {
          label: '提单号',
          prop: 'bl_no',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '柜号',
          prop: 'cabinet_no',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '起运日期',
          prop: 'shipment_date',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '海运费(USD)',
          prop: 'fee',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '税金(USD)',
          prop: 'tax_fee',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '总美金费用(USD)',
          prop: 'amount_usd',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '人民币费用(RMB)',
          prop: 'amount_rmb',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '货代',
          prop: 'company',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '国内路运费用合计(RMB)',
          prop: 'amount',
          width: '300',
          align: 'center',
          tooltip: false
        },
        {
          label: '货代(海外)',
          prop: 'lforwarder_company',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '国外路运费用合计(USD)',
          prop: 'amount_USD',
          width: '300',
          align: 'center',
          tooltip: false
        }
      ],
      columnsSchemaAll: {
        '海运费(USD)': {
          propsHandler({ col, row }) {
            row.fee = row.ocean_shipping.fee
          }
        },
        '税金(USD)': {
          propsHandler({ col, row }) {
            row.tax_fee = row.ocean_shipping.tax_fee
          }
        },
        '总美金费用(USD)': {
          propsHandler({ col, row }) {
            row.amount_usd = row.ocean_shipping.amount_usd
          }
        },
        '人民币费用(RMB)': {
          propsHandler({ col, row }) {
            row.amount_rmb = row.ocean_shipping.amount_rmb
          }
        },
        '货代': {
          propsHandler({ col, row }) {
            row.company = row.domestic_trans.lforwarder_company
          }
        },
        '国内路运费用合计(RMB)': {
          propsHandler({ col, row }) {
            row.amount = row.domestic_trans.amount
          }
        },
        '货代(海外)': {
          propsHandler({ col, row }) {
            row.lforwarder_company = row.overseas_trans.lforwarder_company
          }
        },
        '国外路运费用合计(USD)': {
          propsHandler({ col, row }) {
            row.amount_USD = row.overseas_trans.amount
          }
        }
      },
      exportLoading: false,
      cachePaths: [
        '/supplyChain/expenseList/addExpense'
      ]
    }
  },
  created() {
    // 调用全局混合方法 第一个参数是请求地址对应的名称（api.js），第二个为参数
    this.query()
  },
  activated() {
    this.query()
  },
  mounted() { },
  methods: {
    // 导出
    handleExportAll() {
      const vm = this
      vm.changeDateHandler(vm.searchParams.date_shipment)
      vm.changeDateHandler2(vm.searchParams.date_loading)
      const { page, limit, bl_no, shipment_date_start, shipment_date_end, loading_date, loading_date_start, loading_date_end,
        cabinet_no, destination_port, shipment_date, domestic_name, ocean_name, overseas_name } = vm.searchParams
      const params = {
        page, limit, bl_no, shipment_date_start, shipment_date_end, loading_date,
        cabinet_no, destination_port, shipment_date, domestic_name, ocean_name, overseas_name, loading_date_start, loading_date_end
      }
      // if (type) {
      //   params[type] = value
      // }
      // vm.handleExportxlsx(vm.exportUrl, params)
      vm.downLoadParams = params
      vm.formVisibleDownAll = true
    },
    changeDateHandler(date_shipment) {
      let shipment_date_start = ''
      let shipment_date_end = ''
      if (date_shipment && date_shipment.length === 2) {
        [shipment_date_start, shipment_date_end] = date_shipment
        this.searchParams.shipment_date_start = shipment_date_start
        this.searchParams.shipment_date_end = shipment_date_end
      } else {
        this.searchParams.shipment_date_start = ''
        this.searchParams.shipment_date_end = ''
      }
    },
    changeDateHandler2(date) {
      let loading_date_start = ''
      let loading_date_end = ''
      if (date && date.length === 2) {
        [loading_date_start, loading_date_end] = date
        this.searchParams.loading_date_start = loading_date_start
        this.searchParams.loading_date_end = loading_date_end
      } else {
        this.searchParams.loading_date_start = ''
        this.searchParams.loading_date_end = ''
      }
    },
    handleExport(url) {
      const vm = this
      const id = vm.checkedList[0].id
      vm.exportLoading = true
      vm.$http.get(`${url}/${id}`).then(res => {
        downloadxlsx(res.data)
        vm.exportLoading = false
      }).catch(() => {
        vm.exportLoading = false
      })
    },
    handleSearch() {
      const vm = this
      vm.searchParams.page = 1
      vm.query()
    },
    handleRefresh() {
      const vm = this
      vm.searchParams.page = 1
      vm.searchParams.limit = 10
      vm.searchParams.bl_no = ''
      vm.searchParams.shipment_date = ''
      vm.searchParams.cabinet_no = ''
      vm.searchParams.destination_port = ''
      vm.searchParams.domestic_name = ''
      vm.searchParams.ocean_name = ''
      vm.searchParams.overseas_name = ''
      vm.searchParams.shipment_date_start = ''
      vm.searchParams.shipment_date_end = ''
      vm.searchParams.loading_date_start = ''
      vm.searchParams.loading_date_end = ''
      vm.searchParams.date_shipment = []
      vm.searchParams.date_loading = []

      vm.date = []
      vm.query()
    },
    bulkShipment() {
      this.$router.push('/supplyChain/expenseList/addExpense')
    },
    // 自定义操作栏
    columnsHandler(cols) {
      const that = this
      return cols.concat({
        width: '200',
        label: '操作',
        align: 'center',
        fixed: 'left',
        propsHandler({ row }) {
          return {
            row: row,
            editAction: 'UtilityBill@update',
            delAction: 'UtilityBill@delete'
          }
        },
        component: btnGroup,
        // listeners 可用于监听自定义组件内部 $emit 出的事件
        listeners: {
          editClick(row) {
            that.$router.push({
              path: '/supplyChain/expenseList/addExpense',
              query: { title: '编辑费用单', row: JSON.stringify(row) }
            })
          },
          deleteClick(row) {
            that
              .$confirm('确认要删除？', '提示', {
                distinguishCancelAndClose: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              })
              .then(() => {
                that.$http
                  .delete(`/utilitybill/${row.id}`)
                  .then((res) => {
                    if (res.code === 10000) {
                      that.$message.success('删除成功')
                      that.query()
                    }
                  })
                  .catch((err) => {
                    console.log(err)
                  })
              })
          }
        }
      })
    },
    // 点击海运单按钮
    openList() {
      const dataLength = this.checkedList.length
      if (dataLength === 0 || dataLength > 1) {
        this.$message.error('最多选择一条数据')
        return false
      }
      this.$http
        .get(`/utilitybill/ocean-shipping-bill/${this.checkedList[0].id}`)
        .then((res) => {
          if (res.code === 10000) {
            this.tableDataOcean = res.data
          }
        })
        .catch((err) => {
          console.log(err)
        })
      this.dialogAddVisible = true
    },

    // 海运单多选
    checkIdsOcean(val) {
      console.log(val, '>>>>>>>>>>>')
    },
    // 点击查看拖运单按钮
    towingClick() {
      const dataLength = this.checkedList.length
      if (dataLength === 0 || dataLength > 1) {
        this.$message.error('最多选择一条数据')
        return false
      }
      this.$http
        .get(`/utilitybill/domestic-trans-bill/${this.checkedList[0].id}`)
        .then((res) => {
          if (res.code === 10000) {
            this.tableDataTowing = res.data
          }
        })
        .catch((err) => {
          console.log(err)
        })
      this.dialogTowingVisible = true
    },
    // 拖运单多选
    checkIdsTowing(val) {
      console.log(val, '>>>>>>>>>>>')
    },

    // 点击总单按钮
    allClick() {
      const dataLength = this.checkedList.length
      if (dataLength === 0 || dataLength > 1) {
        this.$message.error('最多选择一条数据')
        return false
      }
      this.$http
        .get(`/utilitybill/total-bill/${this.checkedList[0].id}`)
        .then((res) => {
          if (res.code === 10000) {
            this.tableDataAll = res.data
          }
        })
        .catch((err) => {
          console.log(err)
        })
      this.dialogAllVisible = true
    },
    // 总单多选
    checkIdsAll(val) {
      console.log(val, '>>>>>>>>>>>')
    },
    // 点击批量删除
    selectedDelete() {
      const dataLength = this.checkedList.length
      if (dataLength === 0) {
        this.$message.error('最少选择一条数据')
        return
      }
      this
        .$confirm(`确定批量删除吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          this.$http
            .post(`/utilitybill/batch-delete`, { ids: this.ids })
            .then((res) => {
              if (res.code === 10000) {
                this.$message.success('删除成功')
                this.query()
              }
            })
            .catch((err) => {
              console.log(err)
            })
        })
    },
    handleSizeChange(val) {
      this.searchParams.limit = val
      this.query()
    },
    handleCurrentChange(val) {
      this.searchParams.page = val
      this.query()
    },
    query() {
      const vm = this
      let url = '/utilitybill'
      vm.changeDateHandler(vm.searchParams.date_shipment)
      vm.changeDateHandler2(vm.searchParams.date_loading)
      const { page, limit, bl_no, shipment_date_start, shipment_date_end, loading_date, loading_date_start, loading_date_end,
        cabinet_no, destination_port, shipment_date, domestic_name, ocean_name, overseas_name } = this.searchParams
      url += `?page=${page}&limit=${limit}&bl_no=${bl_no}&overseas_name=${overseas_name}&loading_date_start=${loading_date_start}&loading_date_end=${loading_date_end}&shipment_date_start=${shipment_date_start}&shipment_date_end=${shipment_date_end}&cabinet_no=${cabinet_no}&destination_port=${destination_port}&domestic_name=${domestic_name}&ocean_name=${ocean_name}`
      if (shipment_date) {
        url += `&shipment_date=${shipment_date}`
      }
      if (loading_date) {
        url += `&loading_date=${loading_date}`
      }

      this.initTableData(url)
    }
  }
}
</script>

<style lang="scss" scoped>
.minheight-400 {
  height: 400px;
  overflow-y: auto;
}
</style>
